<template>
  <view class="container">
    <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view class="u-flex u-row-between btn-group">
        <view class="btn-item">
          <image src="../../static/images/tabBar/home.png" mode=""></image>
          优质服务
        </view>
        <view class="btn-item">
          <image src="../../static/images/tabBar/order.png" mode=""></image>
          优质服务
        </view>
        <view class="btn-item">
          <image src="../../static/images/tabBar/user.png" mode=""></image>
          优质服务
        </view>
      </view>
      <view class="login-wrap">
        <u-button type="primary" shape="circle" @click="toLogin" :ripple="true">
          <u-icon
            name="arrow-right-double"
            style="margin-right: 10rpx"
          ></u-icon>
          去登录
        </u-button>
        <u-gap></u-gap>
        <u-button type="primary" shape="circle" @click="toDemo" :ripple="true">
          去 demo 页面
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello"
    };
  },
  methods: {
    toDemo() {
      this.$u.route({
        url: "pages/demo/demo"
      });
    },
    toLogin() {
      this.$u.route({
        url: "pages/login/login"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 40rpx;

  .logo {
    height: 260rpx;
    width: 260rpx;
  }

  .btn-group {
    width: 66%;
    margin-top: 40rpx;

    .btn-item {
      height: 120rpx;
      width: 120rpx;

      image {
        height: 100rpx;
        width: 100rpx;
      }
    }
  }
}

.login-wrap {
  width: 80%;
  margin: 80rpx auto 40rpx;
}
</style>
